<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <script src="../public/cdn/vue/2.6.10/vue.js" charset="utf-8"></script>
        <link rel="stylesheet" href="../public/cdn/element-ui/2.15.6/theme-chalk/index.css">
        <script src="../public/cdn/element-ui/2.15.6/index.js" charset="utf-8"></script>
        <link rel="stylesheet" href="../public/cdn/avue/2.12.1/index.css">
        <script type="text/javascript" src="../public/cdn/avue/2.12.1/avue.js"></script>

<!--        <script src="https://cdn.jsdelivr.net/npm/vue@3.2.10/dist/vue.global.min.js"></script>-->
<!--        <script src="https://cdn.jsdelivr.net/npm/element-plus@2.2.0/dist/index.full.min.js"></script>-->
<!--        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@2.2.0/dist/index.min.css">-->
<!--        <script src="https://cdn.jsdelivr.net/npm/@smallwei/avue@3.2.10/lib/avue.min.js"></script>-->
<!--        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@smallwei/avue@3.2.10/lib/index.min.css">-->

        <script type="text/javascript" src="../public/cdn/axios/1.0.0/axios.min.js"></script>
    </head>

    <body>
        <div id="app">
            <el-card>
                <!-- 使用图钉，可以将内容固定在屏幕上，并且不随页面的滚动而滚动。常用于侧边菜单等，https://avuejs.com/default/affix.html
                    offset-top:距离窗口顶部达到指定偏移量后触发
                 -->
                <avue-affix :offset-top="0">
                    <avue-title :value="title"></avue-title>
                </avue-affix>
                <avue-crud ref="crud" :data="tableData" :search="query" :permission="permissions" :option="tableOption" :page="page"
                           @on-load="onload"
                           @search-change="searchChange"
                           @search-reset="resetChange"
                           @selection-change="selectionChange"
                           @refresh-change="refreshChange"
                           @row-update="rowUpdate"
                           @row-save="rowSave"
                           @row-del="rowDel"
                >
                    <!-- 自定义搜索区域下的按钮 -->
                    <template slot="menuLeft">
                        <el-button type="danger"
                                   size="small"
                                   icon="el-icon-delete"
                                   plain
                                   name="batchDel"
                                   v-if="permissions['batchDelBtn']"
                                   @click="deleteSelected">删 除
                        </el-button>
                    </template>
                    <template slot-scope="{row}"
                              slot="name1">
                        <el-tag>{{row.name1}}</el-tag>
                    </template>
                    <template slot-scope="{row}" slot="menu" >
                        <el-button  size="small" type="text" icon="el-icon-user" @click.native="$message.success('a')">自定义按钮</el-button>
                    </template>
                </avue-crud>
            </el-card>
        </div>
    </body>
    <script>
        var app = new Vue({
            el: '#app',
            components: {},
            data: {
                title: "标题",
                tableData: [
                    {
                        "name1": "名字1",
                        "age": 18,
                        // "sex": 1,
                        "city": "440100",
                        "createDate": "2023-12-01 10:00:00"
                    },
                    {
                        "name1": null,
                        "age": 28,
                        "sex": 2,
                        "city": "440400"
                    }
                ],
                permissions: {  // 可通过权限控制按钮的显示与隐藏，这种能覆盖option里的配置
                    // menu: true,  // 操作列
                    // viewBtn: false, // 操作列中的查看按钮
                    // editBtn: false, // 操作列中的编辑按钮
                    // delBtn: false, // 操作列中的删除按钮
                    // addBtn: true, // 菜单中的新增按钮
                    batchDelBtn: true  // 自定义的批量删除按钮
                },
                query: {
                    sex: 2,
                },
                selectionList: [],
                page: {
                    "total": 0,
                    "pageCount": 0,
                    "currentPage": 1,
                    "pageSize": 10,
                    "pageSizes": [
                        10,
                        20,
                        30,
                        50
                    ],
                    "layout": "total, sizes, prev, pager, next, jumper",
                    "background": true
                },
                tableOption: {
                    menuType: 'menu',
                    cellBtn: true,
                    "border": true,
                    "size": "small",
                    "index": true,
                    "expand": false,
                    "stripe": true, // 行间隔背景颜色
                    "selection": true,  // 是否行可多选
                    "page": true,
                    tip: false,
                    searchShow: true, // 表格搜索首次是否展示，默认true
                    searchMenuSpan: 5,  // 搜索按钮占位个数，不设置的话会换行居中
                    searchIcon: true, // 是否启用展开按钮
                    searchIndex: 3, // 启用展开按钮后，不展开时展示的个数，默认为2
                    "menuAlign": "center",
                    // menuBtn: false,  // 是否展示搜索栏里的按钮，例如搜索、清空
                    // searchBtn: false,
                    // addBtn: false,
                    // emptyBtn: false,
                    menuFixed: "right", // 是否固定操作栏列，true等同于left
                    viewBtn: true,  // 操作列是否展示查看按钮
                    // editBtn: false, // 操作列是否展示编辑按钮
                    // delBtn: false, // 操作列是否展示删除按钮
                    excelBtn: true, // 下载当前表格数据的Excel文件
                    "align": "center",
                    emptyText: "暂无数据", // 空数据时显示的文本内容，TODO 无效
                    dialogClickModal: true, // 是否允许点击模态框之外的区域关闭模态框
                    dicData: {
                        "CITY": [
                            {
                                "label": "广州市",
                                "value": "440100"
                            },
                            {
                                "label": "深圳市",
                                "value": "440300"
                            }
                        ]
                    },
                    column: {
                        name1: {
                            "label": "用户名",
                            span: 24,
                            // searchLabelWidth: 110, // 标题的宽度
                            searchOrder: -1, // 大的排前面，默认为0；搜索字段排序不影响表格顺序
                            search: true,
                            rules: [{
                                required: true, // 编辑dialog时，是否必填，true时如果为空无法提交
                                message: "用户名不能为空", // 当为空提交时，提示语
                                trigger: "blur"
                            }]
                        },
                        age: {
                            span: 24,
                            "label": "年龄",
                            show: false,
                            "type": "password",
                            showPassword: false
                        },
                        sex: {
                            span: 24,
                            "label": "性别",
                            "type": "radio",
                            "value": 1,
                            "search": true,
                            "dicData": [
                                {
                                    "label": "男",
                                    "value": 1
                                },
                                {
                                    "label": "女",
                                    "value": 2
                                }
                            ]
                        },
                        city: {
                            span: 24,
                            "label": "城市",
                            "type": "select",
                            props: {    // 指定label和value要对应接口返回内容的哪个属性
                                label: 'name',
                                value: 'code'
                            },
                            search: true,
                            // dicData: 'CITY',   // 这种不支持 可能要高版本才支持
                            // dicUrl: 'dict/city.json'
                            dicUrl: 'http://cli.avuejs.com/api/area/getCity/440000',    // 2.9.0+支持，需要引入axios组件，且code需要是字符串
                        },
                        createDate: {
                            span: 24,
                            "label": "创建日期",
                            "type": "datetime",
                            "search": true,
                            cell: true,
                            format: "yyyy-MM-dd",
                            valueFormat: "yyyy-MM-dd",
                            searchRange: true, // 开启范围搜索
                            searchSpan: 6, // 搜索框的宽度
                            addDisplay: false, // 添加弹窗中是否展示
                            value: '2024-03-01',    //默认值
                        }
                    },
                    group: [
                        {
                            label: "信息",
                            prop: "info",
                            column: {
                                name: {
                                    "label": "用户名",
                                    span: 12,
                                    search: true,
                                    rules: [{
                                        required: true,
                                        message: "用户名不能为空",
                                        trigger: "blur"
                                    }]
                                },
                                age: {
                                    "label": "年龄",
                                    show: false,
                                    "type": "password",
                                }
                            }
                        }
                    ]
                }
            },
            methods: {
                // 初始化列表
                onload(page, params = {}) {
                    // 在页面上弹出提示分页信息
                    this.$message.success('onload--》分页信息' + JSON.stringify(page))
                    this.page.total = 141
                },
                resetChange (item) {
                    this.$message.success('resetChange--》点击了清空' + JSON.stringify(item))
                },
                searchChange (params, done) {
                    this.query = params;
                    this.page.currentPage = 1;
                    this.$message.success('searchChange--》开始搜索。。。请耐心等待')
                    setTimeout(() => {
                        // done方法用于关闭等待状态
                        done();
                        this.$message.success("searchChange--》搜索完毕，请求参数为：" + JSON.stringify(params));
                    }, 2000)
                },
                refreshChange() {
                    this.$message.success('refreshChange');
                    // this.onload(this.page, this.query);
                },
                rowSave(row, done, loading) {
                    this.$message.success('开始保存。。。请耐心等待')
                    setTimeout(() => {
                        // done方法用于关闭等待状态
                        done();
                        // loading(); // loading()方法用于显示等待状态
                        this.$message.success("保存完毕，请求参数为：" + JSON.stringify(row));
                    }, 2000)
                },
                rowUpdate(row, index, done, loading) {
                    loading(); // 用于禁止表单关闭和重复提交
                    this.$message.success('开始编辑。。。请耐心等待')
                    console.log(row, index, done, loading);
                    setTimeout(() => {
                        this.$message.success("编辑完毕，row为：" + JSON.stringify(row) + ";index=" + index);
                        // done方法用于关闭等待状态
                        done();
                    }, 2000)
                },
                rowDel(row, index, done, loading) {
                    this.$message.success('开始删除。。。请耐心等待')
                    loading(); // 用于禁止表单关闭和重复提交
                    setTimeout(() => {
                        // done方法用于关闭等待状态
                        done();
                        this.$message.success("删除完毕，请求参数为：" + JSON.stringify(row));
                    }, 1000)
                },
                selectionChange(list) {
                    this.$message.success('selectionChange--》选中列表为：' + JSON.stringify(list));
                    this.selectionList = list;
                },
                deleteSelected() {
                    this.$message.success('deleteSelected--》开始删除选中列表。。。请耐心等待')
                    setTimeout(() => {
                        this.$message.success("deleteSelected--》删除选中列表完毕，选中列表为：" + JSON.stringify(this.selectionList));
                    }, 1000)
                }
            }
        })
    </script>
</html>
